<template>
  <div class="padding_10">
    <div>
      <el-button type="primary" @click="postDoc">发布文章</el-button>
      <el-button type="primary" @click="docTypeDialog = true">
        文章类型
      </el-button>
    </div>
    <!-- 搜索输入，选择框 -->
    <div class="grid_4_column" style="margin: 10px 0">
      <!-- 文章标题 -->
      <div class="flex_y_center">
        文章标题：
        <el-input
          v-model="keyWord"
          clearable
          maxlength="50"
          placeholder="请输入文章标题"
          style="width: 200px"
          type="text"
        />
      </div>
      <!-- 文章类型 -->
      <div class="flex_y_center">
        文章类型：
        <el-cascader
          v-model="typeId"
          clearable
          :options="typeList"
          placeholder="请选择筛选类型"
          :props="props"
          :show-all-levels="false"
        />
      </div>
    </div>
    <!-- 筛选，重置按钮 -->
    <div>
      <el-button
        :loading="filterLoading"
        type="primary"
        @click="getDocList('filterLoading')"
      >
        筛选
      </el-button>
      <el-button :loading="resetLoading" @click="reset">重置</el-button>
    </div>
    <!-- 文章展示表格 -->
    <el-table
      :data="tableData"
      :empty-text="emptyText"
      style="margin-top: 10px"
    >
      <el-table-column label="文章标题" prop="title" />
      <el-table-column
        label="文章类别"
        prop="has_one_type_name.title"
        show-overflow-tooltip
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="editDoc(scope.row)">编辑</el-button>
          <el-button type="danger" @click="delDoc(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="display: flex; justify-content: space-between">
      <div></div>
      <el-pagination
        :current-page.sync="page"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="getDocList"
      />
    </div>

    <!-- 发布，编辑文章对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="docDialog" width="70%">
      <div>
        <!-- 文章类型 -->
        <div class="flex_y_center" style="margin-bottom: 20px">
          <div class="inp_title">文章类型：</div>
          <el-select
            v-model="levelId"
            clearable
            placeholder="请选择文章类型"
            @change="docForm.type_id = ''"
          >
            <el-option
              v-for="(item, index) of typeList"
              :key="index"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </div>
        <!-- 子集 -->
        <div class="flex_y_center" style="margin-bottom: 20px">
          <div class="inp_title">类型子集：</div>
          <el-select
            v-model="docForm.type_id"
            clearable
            placeholder="请选择文章类型"
          >
            <el-option
              v-for="(item, index) of sonDocList"
              :key="index"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </div>
        <!-- 文章标题 -->
        <div class="flex_y_center" style="margin-bottom: 20px">
          <div class="inp_title">文章标题：</div>
          <el-input
            v-model="docForm.title"
            placeholder="请输入文章标题"
            style="width: 35%"
          />
        </div>
        <!-- 搜索关键字 -->
        <div class="flex_y_center" style="margin-bottom: 20px">
          <div class="inp_title">关键字：</div>
          <el-input
            v-model="docForm.keyword"
            placeholder="请输入关键字"
            style="width: 35%"
          />
        </div>
        <!-- 文章内容 -->
        <div style="margin-bottom: 20px; display: flex">
          <div class="inp_title pos">文章内容：</div>
          <div style="width: 80%">
            <Editor :o-content="docForm.content" @send="assignContent" />
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="addDoc">发布</el-button>
      </div>
    </el-dialog>
    <!-- 文章类型对话框 -->
    <el-dialog title="文章类型" :visible.sync="docTypeDialog" width="30%">
      <Doc-type :o-type-list="typeList" @sendData="getDocTypeList" />
      <div slot="footer">
        <el-button type="danger" @click="docTypeDialog = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getHelpDocList,
    getHelpTypeList,
    getHelpDocDetail,
    delHelpDoc,
    addHelpDoc,
  } from '@/api/doc'

  export default {
    components: {
      DocType: () => import('./components/doctype.vue'),
      Editor: () => import('./components/editor.vue'),
    },
    data() {
      return {
        keyWord: '', // 搜索关键字
        typeId: [], // 文章类型
        props: {
          label: 'title',
          value: 'id',
        },
        filterLoading: false, // 筛选按钮加载样式显示隐藏
        resetLoading: false, // 重置按钮加载样式显示隐藏
        page: 1,
        total: 10,
        emptyText: ' ',
        tableData: [],
        typeList: [],

        docDialog: false, // 发布文章dialog
        dialogTitle: '', // dialog标题
        levelId: '', // 存放选择类别父级
        sonDocList: [], // 所选择父级的子集列表
        // 新增，编辑文章时传递的form数据
        docForm: {
          id: '', // 文章id(新增时不传)
          type_id: '', // 类型id
          title: '', // 标题
          keyword: '', // 关键字
          content: '', // 内容
        },
        hint: {
          type_id: '文章类型id',
          title: '文章标题',
          keyword: '关键字',
          content: '文章内容',
        },

        docTypeDialog: false, // 文章类型dialog
      }
    },
    watch: {
      // 监听发布文章对话框的关闭清空所有输入
      docDialog(newValue) {
        if (!newValue) {
          this.levelId = ''
          for (let item in this.docForm) {
            this.docForm[item] = ''
          }
        }
      },
      // 根据选择的父级文章类型，筛选出其子集
      levelId(newValue) {
        for (let item of this.typeList) {
          if (item.id == newValue) {
            this.sonDocList = item.children
          }
        }
      },
    },
    mounted() {
      this.getDocList()
      this.getDocTypeList()
    },
    methods: {
      // 获取文章列表
      getDocList(btnLoad) {
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        this[btnLoad] = true
        const params = {
          page: btnLoad == 'filterLoading' ? 1 : this.page,
          keyword: this.keyWord,
          type_id:
            this.typeId.length == 0 ? '' : this.typeId[this.typeId.length - 1],
        }

        getHelpDocList(params).then((res) => {
          this.tableData = res.data.data
          this.total = res.data.per_page * res.data.last_page
          loading.close()
          this[btnLoad] = false
          this.emptyText = '暂无数据'
        })
      },
      // 添加文章类型
      getDocTypeList() {
        getHelpTypeList().then((res) => {
          this.typeList = res.data
        })
      },
      // 重置筛选按钮，并重新获取一次列表数据
      reset() {
        this.keyWord = ''
        this.typeId = []
        this.getDocList('resetLoading')
      },
      // 发布文章
      postDoc() {
        this.dialogTitle = '编辑文章'
        this.docDialog = true
      },
      // 编辑文章
      editDoc(row) {
        this.dialogTitle = '编辑文章'
        const params = {
          id: row.id,
        }
        getHelpDocDetail(params).then((res) => {
          for (let item in this.docForm) {
            if (item != 'type_id') {
              this.docForm[item] = res.data[item]
            }
          }
          this.levelId = res.data.parent_id
          this.docForm.type_id = res.data.type_id
          this.docDialog = true
        })
      },
      // 删除文章
      delDoc(row) {
        this.$confirm('是否要删除' + row.title, '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const params = {
            id: row.id,
          }
          // 调用修改上下架状态接口函数
          delHelpDoc(params).then(() => {
            this.$message.success('删除成功')
            this.getDocList()
          })
        })
      },
      // 赋值富文本输入
      assignContent(txt) {
        this.docForm.content = txt
      },
      // 添加文章
      addDoc() {
        // 效验输入框内容是否有遗漏的输入
        for (let item in this.hint) {
          if (this.docForm[item] == '') {
            this.$message.error(`${this.hint[item]}未填写`)
            return false
          }
        }
        addHelpDoc(this.docForm).then(() => {
          this.docDialog = false
          this.keyWord = ''
          this.typeId = []
          this.getDocList()
        })
      },
    },
  }
</script>

<style scoped>
  .grid_4_column {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
  .inp_title {
    width: 20%;
    text-align: right;
  }
  .pos {
    position: relative;
    top: 5px;
  }
</style>
